

<!--
 * @Author: tenet 18742176629@163.com
 * @Date: 2024/8/2 上午9:24
 * @LastEditors: toString
 * @LastEditTime: 2025-01-13 19:17:31
 * @FilePath: \token-for-token-admin\src\views\record\index.vue
 * @Description: Description
-->
<template>
  <Header>
    <template #title>{{ t("title.Record") }}</template>
  </Header>
  <div class="search">
    <!-- 查询 -->
    <el-form :inline="true" :model="queryParams" class="demo-form-inline">
      <el-form-item :label="t('table.txHash')">
        <el-input v-model.trim="queryParams.txHash" :placeholder="t('table.txHash')"></el-input>
      </el-form-item>
      <el-form-item :label="t('table.address')">
        <el-input v-model.trim="queryParams.address" :placeholder="t('table.address')"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">{{ t("global.Query") }}</el-button>
        <el-button @click="onReset">{{ t("global.Reset") }}</el-button>
      </el-form-item>

    </el-form>
  </div>
  <div class="table">
    <el-table :data="tableData" border style="width: auto; height: 500px" v-loading="loading">
      <el-table-column prop="txHash" :label="t('table.txHash')" width="auto" align="center" show-overflow-tooltip />
      <el-table-column prop="fromChain" :label="t('table.fromChain')" width="100" align="center" />
      <el-table-column prop="toChain" :label="t('table.toChain')" width="100" align="center" />
      <el-table-column prop="address" :label="t('table.address')" width="400" align="center" />
      <el-table-column prop="amount" :label="t('table.amount')" width="100" align="center" />
      <el-table-column prop="status" :label="t('table.status')" width="100" align="center">
        <template #default="scope">
          <el-tag :type="scope.row.status == 1 ? 'success' : 'danger'">
            {{ scope.row.status == 1 ? t("withdrawal.Success") : t("withdrawal.Failed") }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="status" :label="t('table.timestamp')" width="100" align="center">
        <template #default="scope">
          {{ formatTimestamp(scope.row.timestamp) }}
        </template>
      </el-table-column>
    </el-table>
  </div>
  <div class="page">
    <el-pagination v-model:current-page="pageIndex" :page-size="pageSize" layout="total, prev, pager, next" :total="total" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
  </div>
</template>

<script setup>
import { ref, onMounted, reactive, unref } from "vue";
import Header from "../layout/header.vue";
import { getExchangeList } from "@/require/api";
import { useRouter } from "vue-router";
import { ElMessage, ElPagination } from "element-plus";
import { useI18n } from "vue-i18n";
import { Refresh, Search } from "@element-plus/icons-vue";
import { formatTimestamp } from "@/utils/timeStamp.js";

const { t } = useI18n();
// 在组件被挂载后执行
onMounted(() => {
  getList();
});

const router = useRouter();
const pageSize = ref(10);
const pageIndex = ref(1);
const total = ref(0);
const tableData = ref([]);
const loading = ref(false);

// 查询参数
const queryParams = reactive([
  {
    txHash: "",
    address: ""
  }
]);

// 搜索方法
const onSubmit = () => {
  // 查询时把 pageIndex 重置为1
  pageIndex.value = 1
  getList();
};

// 重置方法
const onReset = () => {
  queryParams.txHash = "";
  queryParams.address = "";
  getList();
};

// 获取上币申请记录
async function getList() {
  try {
    loading.value = true;
    const { code, data, msg } = await getExchangeList({
      pageIndex: pageIndex.value,
      pageSize: unref(pageSize),
      txHash: queryParams.txHash,
      address: queryParams.address
    })

    
    
    if (code === 200) {
      console.log(data)
      tableData.value = data.list
      total.value = data.total
    } else {
      ElMessage.error(msg)
    }
  } catch (e) {
    console.log(e);
  } finally {
    loading.value = false;
  }
}

// 分页
function handleSizeChange(val) {
  pageSize.value = val;
  getList();
}

// 分页
function handleCurrentChange(val) {
  pageIndex.value = val;
  getList();
}
</script>

<style scoped lang="less">
.search {
  background-color: #fff;
  padding: 20px;

  .demo-form-inline {
    height: 50px !important;
    display: flex;
    justify-content: flex-start;
    align-items: center;

    :deep(.el-form-item){
      margin-bottom: 0;
    }
  }
  
}
.table {
  width: 100%;
  margin: 20px auto;
  background-color: #fff;
}
</style>
